
@mixin box-sizing( $p: border-box ) {
  -webkit-box-sizing: $p;
     -moz-box-sizing: $p;
          box-sizing: $p;
}

// Box Sizing
* { @include box-sizing(); }

html {
    background-color: $white;
    overflow-y: scroll;
}

html, body {
  min-height: 100%;
}

body {
    position: relative;
    margin: 0 auto;
    font-family: $fontCopy;
    color: $CopyColor;
    line-height: 1.68;
    padding-bottom: $unit;

    @media screen and (max-width: $canvasMedium - 1) {
        @include pxRem(width, $canvasSmall);
        & > .super-hero,
        & > .site-header {
            @include primaryPadding($canvasSmall);
        }
    }

    @media screen and (min-width: $canvasMedium) and (max-width: $canvasLarge - 1) {
        @include pxRem(width, $canvasMedium);
        & > .super-hero,
        & > .site-header {
            @include primaryPadding($canvasMedium);
        }
    }

    @media screen and (min-width: $canvasLarge) {
        @include pxRem(width, $canvasLarge);
        & > .super-hero,
        & > .site-header {
            @include primaryPadding($canvasLarge);
        }
    }
}

section {
    margin-top: $unit * 1px;
}

figure {
    margin: $unit * 1px 0;

    & > img {
        display: block;
    }
}

figcaption > p {
    margin: 0.25em 0;
}

:focus {
  outline: none;
}

::selection {
  background: $color1;
  color: #fff;
}

a,
a:link,
a:active,
a:visited
{
  color: $color1;

  @include transition(color,0.125s,linear);

  &:hover {
    color: darken( $color1, 25 );
  }
}

aside {
  float: right;
  margin: 0 0 1em 1em;
  padding: .75em;
  width: 25%;
  border-style: solid;
  border-width: 0 0 0 1px;

  &.left {
    float: left;
    margin: 0 1em 1em 0;
    border-width: 0 1px 0 0;
  }
}

iframe {
    border: 0 none;
}

p {
    @include pxRem(margin-top, $fontSize * 1px); 
    @include pxRem(margin-bottom, $fontSize * 1px); 
}
